<template>
    <div class="schedule-container">
      <div class="header">
        <div class="logo">蜂鸟竞技</div>
        <div class="menu">
          <span>首页</span>
          <span>赛程</span>
          <span>战队排名</span>
          <span>赛事库</span>
          <span>详细</span>
          <span>联系我们</span>
        </div>
        <div class="login">登录</div>
      </div>
      <div class="content">
        <div class="date-selector">
          <button @click="changeDate(-1)">前一天</button>
          <span>{{ currentDate }}</span>
          <button @click="changeDate(1)">后一天</button>
        </div>
        <div class="date-tabs">
          <span v-for="(date, index) in dates" :key="index" :class="{ active: date === currentDate }" @click="selectDate(date)">
            {{ date }}
          </span>
        </div>
        <table class="schedule-table">
          <thead>
            <tr>
              <th>时间</th>
              <th>比赛</th>
              <th>队伍1</th>
              <th>队伍2</th>
              <th>人气</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(match, index) in matches" :key="index">
              <td>{{ match.time }}</td>
              <td>{{ match.tournament }}</td>
              <td>{{ match.team1 }}</td>
              <td>{{ match.team2 }}</td>
              <td>{{ match.popularity }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        currentDate: '07月15日 星期一',
        dates: ['07月15日 星期一', '07月16日 星期二', '07月17日 星期三', '07月18日 星期四', '07月19日 星期五', '07月20日 星期六', '07月21日 星期日'],
        matches: [
          { time: '01:00', tournament: 'EPL亚洲区', team1: 'Furia-A', team2: 'KRÜ', popularity: 71 },
          { time: '02:00', tournament: 'IESF世界锦标赛', team1: 'Latvia', team2: 'Alternate', popularity: 55 },
          { time: '02:00', tournament: 'IESF世界锦标赛', team1: 'Slovakia', team2: 'Portugal', popularity: 48 },
          { time: '02:00', tournament: 'IESF世界锦标赛', team1: 'Rebels', team2: 'Romania', popularity: 44 },
          { time: '02:00', tournament: 'FemmeFury Queen...', team1: 'France fe', team2: 'dream catchers f...', popularity: 30 },
          { time: '03:00', tournament: 'IESF世界锦标赛', team1: 'Turkey', team2: 'kONO', popularity: 44 },
          { time: '16:00', tournament: '欧洲职业联赛', team1: 'Unity', team2: 'kONO', popularity: 44 },
          { time: '17:00', tournament: 'Elisa邀请赛', team1: 'Enterprise', team2: 'TNL', popularity: 30 },
          { time: '18:00', tournament: 'CCT 第三季', team1: 'Passion UA', team2: 'WOPA', popularity: 24 },
        ],
      };
    },
    methods: {
      changeDate(days) {
        const currentIndex = this.dates.indexOf(this.currentDate);
        const newIndex = currentIndex + days;
        if (newIndex >= 0 && newIndex < this.dates.length) {
          this.currentDate = this.dates[newIndex];
        }
      },
      selectDate(date) {
        this.currentDate = date;
      },
    },
  };
  </script>

  <style scoped>
  .schedule-container {
    font-family: Arial, sans-serif;
  }

  .header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
  }

  .logo {
    font-size: 20px;
    font-weight: bold;
  }

  .menu span {
    margin: 0 10px;
    cursor: pointer;
  }

  .login {
    cursor: pointer;
  }

  .content {
    padding: 20px;
  }

  .date-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }

  .date-tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .date-tabs span {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .date-tabs .active {
    background-color: #007bff;
    color: white;
  }

  .schedule-table {
    width: 100%;
    border-collapse: collapse;
  }

  .schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  </style>
